<template>
	<view class="container-root">
		<swiper class="swiper-banner" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
			<block v-for="(item,index) in bannerList" :key="index">
				<swiper-item>
					<image class="swiper-image" :src="getBannerImgUrl(item.picUrl)" mode=""></image>
				</swiper-item>
			</block>
		</swiper>
		
		<view class="bold-line"></view>		
		
		<swiper class="swiper-activity" >
			
			<block class="full-fill" v-for="(item,index) in activityUrls" :key="flashImg">
				<swiper-item>
					<image class="activity-image" v-if="item.imgLoaded" :src="getActivityImgUrl(item.titlePic)" mode="scaleToFill" ></image>
					<image class="activity-image" v-if="!item.imgLoaded" src="/static/images/load_fial_image.png" mode="scaleToFill" ></image>
				
				</swiper-item>
			</block>
						
		</swiper>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import httpRequest from '@/utils/utilHttp.js'
	
	export default {
		computed:{
			...mapState(['hasLogin', 'token', 'picPath', 'userInfo']),
		},
		data() {			
			return {
				bannerList:[],
				activityUrls:[],
				activityImgs:{},
				flashImg:0,
			}
		},
		onLoad() {
			//console.log('加载首页...');
			
			if(this.token){
				var ret = this.autoLogin();
				if(ret == false){
					this.logout();
					uni.reLaunch({
						url:"../login/login?Type=0"
					})
				}else{
					//console.log('autoLogin() OK!')
				}				
			}
			if(this.token == '' || this.hasLogin == false){
				if(this.token == ''){
					//console.log('token==空')
				}
				if(this.hasLogin == false)
				{
					//console.log('未进行登录！')
				}
				
				uni.reLaunch({
					url:"../login/login?Type=0"
				})
			}else{
				this.getBannerList();
				this.getNewActivity();
			}	
		},
		methods: {
			...mapMutations(['logout','setpath', 'login']), //对全局方法 login进行监控
			autoLogin:function(){
				var self = this;
				let params = {
					type: "0", // 0-用户，1-客服
					token: self.token
				};
				let options = {
					url:httpRequest.requestUrl.autoLogin_post,
					method:httpRequest.requestMethod.POST,
					datas:params
				};
				httpRequest.Request(options).then(res => {
					//console.log(res)
					if (res.data.status == 200 && res.data.content) {
						this.login(res.data);
						return true;
					}else{
						return false;
					}					
				})
			},
			getBannerList:function(){
				var self = this;
				let params = {};
				let options = {
					url:httpRequest.requestUrl.banner_get,
					method:httpRequest.requestMethod.GET,
					datas:params
				}
				httpRequest.Request(options).then(res => {
					//console.log(res)
					if (res.data.status == 200) {
						self.bannerList = res.data.content;
						//console.log(self.bannerList);						
					}
				})
			},
			getNewActivity:function(){
				var self = this;
				
				let params = {
					'userCode': self.userInfo.userCode,
					'userlevel': self.userInfo.userLevel,
					'nitId': self.userInfo.netId,
					'token': self.token,
				};
				let options = {
					url:httpRequest.requestUrl.newActivity_get,
					method:httpRequest.requestMethod.GET,
					datas:params
				}
				httpRequest.Request(options).then(res => {
					//console.log(res)
					if (res.data.status == 200) {
						//console.log('activityUrl arrived2!')
						self.activityUrls = res.data.content;
						for(var i=0; i < self.activityUrls.length; i++){
							self.activityUrls[i].imgLoaded = self.firstActivityImgUrl(self.activityUrls[i].titlePic);
						}
						console.log(self.activityUrls);						
					}
				})
			},
			
			getBannerImgUrl(icon) {
				return httpRequest.requestUrl.bannerImageUrl + icon;				
			},
			firstActivityImgUrl(icon) {
				console.log('firstActivityImgUrl()...');

				var self = this;
				var iconObj={path:'',loaded:false};
				iconObj.path = '/static/images/load_fial_image.png'; 
				iconObj.loaded = false;
				var tempImagePath = uni.getStorageSync('tempImagePath');
				
				if (tempImagePath && tempImagePath[icon]) {
					iconObj.path = tempImagePath[icon];
					iconObj.loaded = true;
					self.setpath(tempImagePath[icon]);
				} 
				else {
					let options = {
						url:httpRequest.requestUrl.imageUrl + icon						
					};
					httpRequest.DownloadFile(options).then(res => {						
						if(res.statusCode == 200){
							//console.log('downloadFile Ok!')
							var tempImagePath = uni.getStorageSync('tempImagePath');
							if (tempImagePath && tempImagePath[icon]) {
								iconObj.path = tempImagePath[icon];
								iconObj.loaded = true;							    
								self.setpath(tempImagePath[icon]);
								for(var i = 0; i < self.activityUrls.length; i++){
									if(self.activityUrls[i].titlePic == icon)
									{
										self.activityUrls[i].imgLoaded = true;
										++self.flashImg;
										break;
									}
								}
							}
						}						
					})
				}
				if(!self.activityImgs[icon])
				{
					self.activityImgs[icon] = iconObj;
				}
				if(self.activityImgs[icon].path != iconObj.path)
				{
					self.activityImgs[icon].path = iconObj.path;
				}
				if(self.activityImgs[icon].loaded != iconObj.loaded)
				{
					self.activityImgs[icon].loaded = iconObj.loaded;
				}
				return self.activityImgs[icon].loaded;
			},
			getActivityImgUrl(icon) {
				console.log('getActivityImgUrl()...');
				
				var self = this;
				var iconObj={path:'',loaded:false};
				iconObj.path = '/static/images/load_fial_image.png'; 
				iconObj.loaded = false;
				if(!self.activityImgs[icon])
				{
					self.activityImgs[icon] = iconObj;
				}
				
				return self.activityImgs[icon].path;				
			}
		}
	}
</script>

<style>
	.swiper-banner {
		height: 300rpx;
		width: 100%;
	}
	.swiper-image{
		width:100%;		
		height:100%;
	}
	.bold-line{
		width: 100%;
		height: 50rpx;
		background-color: #00B9EF;
	}

	.swiper-activity{
		width: 100%;
		height: calc(100vh - 350rpx);
		flex:1;
	}
	.full-fill{
		width: 100%;
		height: 100%;
	}
	.activity-image{
		width: 100%;
		height:100%;		
	}
	

	
</style>
